<template>
  <div class="dashboard-container">
<!--    <div class="top">-->
<!--        <span>自然韵美容院-首页</span>-->
<!--    </div>-->
    <div class="container">
        <div class="container-top">
          <div class="left-top">
            <div v-if="showDialog=true">
              <el-popover
                placement="top-start"
                title=""
                width="400"
                trigger="hover"
                v-if="this.showDialog=true">

                <el-table border :data="storeList"
                          style="width:100%;text-align: center"
                          :height="tableHeight"
                          element-loading-text="Loading">
                  <el-table-column prop="storeCode"
                                   label="店铺编码">
                  </el-table-column>
                  <el-table-column prop="storeName"
                                   label="店铺名称">
                  </el-table-column>
                </el-table>
                <el-button slot="reference" style="background-color: transparent;border-style: none">
                  <img src="../../assets/images/store.png" alt="门店数量" style="margin-top: 10px">
                  <div class="top-top-top-text" style="margin-top: 12px;color: #333333">
                     门店数量：<span style="color: #3399ff;font-size: 20px;margin-top: 5px"><b>{{listQuery.storeCount}}</b></span>
                  </div>
                </el-button>
              </el-popover>
            </div>
            <div v-else>
              <img src="../../assets/images/store.png" alt="门店数量" style="margin-top: 10px;margin-left:10px">
            </div>
          </div>
          <div class="left-top">
            <div v-if="showDialog=true">
              <el-popover
                placement="top-start"
                title=""
                width="400"
                trigger="hover"
                v-if="this.showDialog=true">

                <el-table border :data="physicianList"
                          style="width:100%;text-align: center"
                          :height="tableHeight"
                          element-loading-text="Loading">
                  <el-table-column prop="physicianName"
                                   label="医师名称">
                  </el-table-column>
                  <el-table-column prop="physicianGrade"
                                   label="医师等级">
                  </el-table-column>
                </el-table>
                <el-button slot="reference" style="background-color: transparent;border-style: none">
                  <img src="../../assets/images/doctor.png" alt="医师数量" style="margin-top: 10px">
                  <div class="top-top-top-text" style="margin-top: 12px;color: #333333">
                    医师数量：<span style="color: #3399ff;font-size: 20px;margin-top: 5px"><b>{{listQuery.physicianCount}}</b></span>
                  </div>
                </el-button>
              </el-popover>
            </div>
            <div v-else>
              <img src="../../assets/images/doctor.png" alt="医师数量" style="margin-top: 10px;margin-left:10px">
            </div>
          </div>
          <div class="left-top">
            <div v-if="showDialog=true">
              <el-popover
                placement="top-start"
                title=""
                width="400"
                trigger="hover"
                v-if="this.showDialog=true">

                <el-table border :data="clientList"
                          style="width:100%;text-align: center"
                          :height="tableHeight"
                          element-loading-text="Loading">
                  <el-table-column prop="clientName"
                                   label="顾客名称">
                  </el-table-column>
                  <el-table-column prop="clientTel"
                                   label="顾客电话">
                  </el-table-column>
                </el-table>
                <el-button slot="reference" style="background-color: transparent;border-style: none">
                  <img src="../../assets/images/client.png" alt="在册顾客数量" style="margin-top: 10px">
                  <div class="top-top-top-text" style="margin-top: 12px;color: #333333">
                    顾客数量：<span style="color: #3399ff;font-size: 20px;margin-top: 5px"><b>{{listQuery.clientCount}}</b></span>
                  </div>
                </el-button>
              </el-popover>
            </div>
            <div v-else>
              <img src="../../assets/images/client.png" alt="在册顾客数量" style="margin-top: 10px;margin-left:10px">
            </div>
          </div>
          <div class="left-top">
            <div v-if="showDialog=true">
              <el-popover
                placement="top-start"
                title=""
                width="400"
                trigger="hover"
                v-if="this.showDialog=true">

                <el-table border :data="productCountList"
                          style="width:100%;text-align: center"
                          :height="tableHeight"
                          element-loading-text="Loading">
                  <el-table-column prop="proCode"
                                   label="商品编码">
                  </el-table-column>
                  <el-table-column prop="proName"
                                   label="商品名称">
                  </el-table-column>
                </el-table>
                <el-button slot="reference" style="background-color: transparent;border-style: none">
                  <img src="../../assets/images/product.png" alt="商品品类个数" style="margin-top: 10px">
                  <div class="top-top-top-text" style="margin-top: 12px;color: #333333">
                    商品种类：<span style="color: #3399ff;font-size: 20px;margin-top: 5px"><b>{{listQuery.productCount}}</b></span>
                  </div>
                </el-button>
              </el-popover>
            </div>
            <div v-else>
              <img src="../../assets/images/product.png" alt="商品品类个数" style="margin-top: 10px;margin-left:10px">
            </div>
          </div>
        </div>
        <div class="middle">
          <div class="middle-top">
              <div class="middle-top-text"><span>趋势分析</span></div>
            <div class="middle-top-time">
              <el-date-picker
                v-model="listQuery.dataTime"
                value-format=“yyyy-MM-dd”
                type="daterange"
                style="border-radius: 10px;"
                range-separator="~"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </div>
          </div>
          <div class="middle-middle">
            <div class="middle-middle-echart" id="reservations" style="margin-left: 24px"></div>
            <div class="middle-middle-echart" id="inventoryAndSales"></div>
            <div class="middle-middle-echart" id="reservationsOver" style="margin-top: 15px;margin-left: 24px"></div>
            <div class="middle-middle-echart" id="proInventoryList" style="margin-top: 15px"></div>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
  import * as echarts from 'echarts';
  import { mapGetters } from 'vuex'
  import * as store from "@/api/store/store"
  import * as home from "@/api/home/home"
  import * as physician from "@/api/personal/physician"
  import * as client from "@/api/personal/client"
  import * as product from "@/api/product/product"


  export default {
    name: 'Dashboard',
    components: {

    },
    computed: {
      ...mapGetters([
        'name'
      ])
    },
    data() {
      return {
        storeList:[],
        showDialog: false,
        physicianList:null,
        clientList:null,
        selectNameAndInventoryList:null,
        proNameList:[],
        proInventoryList:[],
        productCountList:[],
        map:null,
        dataTime:null,
        tableHeight: 200,
        dialogVisibleStore: false,
        listQuery: { // 查询列表时的参数对象
          pageNumber: 1,
          pageSize: 10,
          appName: process.env.VUE_APP_APP_NAME,
          tenantIdList: [],
          storeCount:null,
          physicianCount:null,
          clientCount:null,
          productCount:null
        },
        total: 0,
        //预约图信息
        reservationsDayTimeList:[],
        reservationsDayCountList:[],

        //完成接待
        reservationsOverTimeList:[],
        reservationsOverCountList:[],

        //销量库存量趋势
        inventoryAndSalesUpTimeList:[],
        inventoryAndSalesUpSaleList:[],
        inventoryAndSalesUpPriceList:[],


        //库存明细
        proInventoryNameList:[],
        proInventoryTimeCountList:[],








        //批发市场echerts数据集合
        pfDateList:[],
        pfKcList:[],
        pfXlList:[],
      }
    },
    mounted() {
      this.getStoreListCount()
      this.getPhysicianListCount()
      this.getClientListCount()
      this.getSelectNameAndInventory()
      this.getReservationsDayList()
      this.getInventoryAndSalesDayListUp()
      this.geSelectProductCount()
      this.getProInventoryList()
      this.getReservationsOverList()
    },
    methods: {

      async getReservationsDayList(){
        this.reservationsDayTimeList=[]
        this.reservationsDayCountList=[]
        this.listQuery.tenantIdList = []
        const { content } = await home.getReservationsDayList(this.listQuery)
       // console.log(content);
        for(let i = 0;i<content.length;i++){
          this.reservationsDayTimeList.push(content[i].dayTime)
          this.reservationsDayCountList.push(content[i].reservationNumber)
        }

        this.getReservations();

      },

      async getInventoryAndSalesDayListUp(){
        this.inventoryAndSalesUpTimeList=[]
        this.inventoryAndSalesUpSaleList=[]
        this.listQuery.tenantIdList = []
        const { content } = await home.getInventoryAndSalesDayListUp(this.listQuery)
       console.log(content);
        for(let i = 0;i<content.length;i++){
          this.inventoryAndSalesUpTimeList.push(content[i].createDate.substring(0,10))
          this.inventoryAndSalesUpSaleList.push(content[i].inNum)
          this.inventoryAndSalesUpPriceList.push(content[i].allPrice)
        }

        this.getInventoryAndSales();

      },


      async getProInventoryList(){
        this.proInventoryNameList=[]
        this.proInventoryCountList=[]
        this.listQuery.tenantIdList = []
        const { content } = await home.getProInventoryList(this.listQuery)
       console.log(content);
        for(let i = 0;i<content.length;i++){
          this.proInventoryNameList.push(content[i].proName)
          this.proInventoryCountList.push(content[i].proInventory)
        }

        this.getProInventory();

      },

      async getReservationsOverList(){
        this.reservationsOverTimeList=[]
        this.reservationsOverCountList=[]
        this.listQuery.tenantIdList = []
        const { content } = await home.getReservationsOverList(this.listQuery)
       console.log(content);
        for(let i = 0;i<content.length;i++){
          this.reservationsOverTimeList.push(content[i].dayTime)
          this.reservationsOverCountList.push(content[i].reservationNumber)
        }
        this.getReservationsOver();
      },



      //预约量
      getReservations(){
        //来获取存放柱状图的dom元素
        let myChartMain = this.$echarts.init(document.getElementById('reservations'))
        //这里是柱状图的配置，最重要的是series里面的data和xAxis中的data都是数组，
        // 用来存放数据，上面从后台获取到的seriesData和nameDatas赋值给它们，就可以展示所需要的数据
        let option;
        option = {
          //标题
          title:[
            {
              text: '每天预约量',
              left: 10,
              top:4,
              textStyle: {
                color: '#333',
                fontSize: 18, // 务必记住设置文字大小只能是数字
                fontWeight: 500
              },
            },
            {
              text: '(近30天预约波动波动趋势 人/次)',
              left:110,
              top:8,
              textStyle: {
                color: '#848485',
                fontSize: 12, // 务必记住设置文字大小只能是数字
                fontWeight: 400
              },
            }],
          color:['#5e9cf8'],
          tooltip: {
            show: true,
            trigger: 'axis',//鼠标经过提示

          },
          legend: {
            data:['价格']
          },
          grid: {
            left: '4%',
            right: '5%',
            bottom: '3%',
            containLabel: true
          },
          xAxis:[{
            type: 'category',
            data:this.reservationsDayTimeList,
            //X轴线上的标记刻度
            axisTick:{
              //设置为不显示
              show:false,
              //横坐标数据显示位置(起始位置向后移半格)
              alignWithLabel: true
            },

            axisLine: {
              lineStyle: {
                type:  'solid' ,
                color:  '#e7e6e6' , //左边线的颜色
                width: '1' //坐标线的宽度
              }
            },
            formatter: '{value}月'
          }],
          yAxis:[{
            type:'value',
            axisLine: {
              //设置为不显示
              show:false,
              lineStyle: {
                type: 'solid',
                color: '#e7e6e6',//左边线的颜色
                width:'1'//坐标线的宽度
              }
            },
            splitLine:{
              show:true,
              lineStyle:{
                type:'dashed',
                color:'#efeded',
              }
            },
            //y轴线上的标记刻度
            axisTick:{
              //设置为不显示
              show:false
            },
          }
          ],
          series:[
            {
              type:'line',
              symbol: "none",
              itemStyle: {
                color: '#5e9cf8',
                normal: {
                  lineStyle: {        // 系列级个性化折线样式
                    width: 2,
                    type: 'solid',
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: '#5e9cf8'
                    }, {
                      offset: 1,
                      color: '#5e9cf8'
                    }]),//线条渐变色
                  }
                },
                emphasis: {
                  color: '#5e9cf8',
                  lineStyle: {        // 系列级个性化折线样式
                    width: 2,
                    type: 'dotted',
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: '#5e9cf8'
                    }, {
                      offset: 1,
                      color: '#5e9cf8'
                    }])
                  }
                }
              },//线条样式
              areaStyle:{
                normal:{
                  //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(61,112,206,0.39)'
                  }, {
                    offset: .34,
                    color: 'rgba(56,155,255,0.25)'
                  },{
                    offset: 1,
                    color: 'rgba(38,197,254,0.00)'
                  }])

                }
              },//区域颜色渐变
              data:this.reservationsDayCountList,
            }
          ]
        };
        myChartMain.setOption(option);
      },

      //商品销量库存echerts图表
      getInventoryAndSales(){
        //来获取存放柱状图的dom元素
        let myChartMain2 = this.$echarts.init(document.getElementById('inventoryAndSales'))
        //这里是柱状图的配置，最重要的是series里面的data和xAxis中的data都是数组，
        // 用来存放数据，上面从后台获取到的seriesData和nameDatas赋值给它们，就可以展示所需要的数据
        let option2;
        option2 = {
          //标题
          title:[
            {
              text: '总体销量趋势',
              left: 10,
              top:4,
              textStyle: {
                color: '#333',
                fontSize: 18, // 务必记住设置文字大小只能是数字
                fontWeight: 500
              },
            },
            {
              text: '(近30天总体销量与收款趋势 单位：件)',
              left:130,
              top:8,
              textStyle: {
                color: '#848485',
                fontSize: 12, // 务必记住设置文字大小只能是数字
                fontWeight: 400
              },
            }],
          color: ['#7264C8', '#5e9cf8'],
          tooltip: {
            trigger: 'axis',//鼠标经过提示
          },
          legend: {
            icon:'circle',
            itemHeight: 7, //修改icon图形大小
            itemGap: 13,
            itemWidth: 7,//图标宽
            top:10,
            right: 20,
            align: 'left',
            textStyle:{
              fontSize:10,
              color:'#848485',
              fontWeight:100
            },

            data:['销量','收款'],
          },
          grid: {
            left: '4%',
            right: '5%',
            bottom: '3%',
            containLabel: true
          },
          xAxis:[{
            type: 'category',
            data: this.inventoryAndSalesUpTimeList,
            //X轴线上的标记刻度
            axisTick:{
              //设置为不显示
              show:false,
              //横坐标数据显示位置(起始位置向后移半格)
              alignWithLabel: true
            },
            axisLine: {
              lineStyle: {
                type:  'solid' ,
                color:  '#e7e6e6' , //左边线的颜色
                width: '1' //坐标线的宽度
              }
            },
          }],
          yAxis:[{
            type:'value',
            axisLine: {
              //设置为不显示
              show:false,
              lineStyle: {
                type: 'solid',
                color: '#e7e6e6',//左边线的颜色
                width:'1'//坐标线的宽度
              }
            },
            splitLine:{
              show:true,
              lineStyle:{
                type:'dashed',
                color:'#efeded',
              }
            },
            //y轴线上的标记刻度
            axisTick:{
              //设置为不显示
              show:false
            },
          }
          ],
          series:[
            {
              name:'销量',
              type:'line',
              symbol: "none",
              itemStyle: {
                color: "#7264C8",
                normal: {
                  lineStyle: {        // 系列级个性化折线样式
                    width: 2,
                    type: 'solid',
                    color: "#7264C8",//线条颜色
                  }
                },
                emphasis: {
                  borderColor: "#7264C8",
                  borderWidth: 10
                }
              },//线条样式
              areaStyle:{
                normal:{
                  //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#7264C8'
                  }, {
                    offset: .34,
                    color: 'rgba(138,130,255,0.25)'
                  },{
                    offset: 1,
                    color: 'rgba(38,197,254,0)'
                  }])
                }
              },//区域颜色渐变
              data:this.inventoryAndSalesUpSaleList
            },

            {
              name:'收款',
              type:'line',
              symbol: "none",
              itemStyle: {
                color: "#66bfc8",
                normal: {
                  lineStyle: {        // 系列级个性化折线样式
                    width: 2,
                    type: 'solid',
                    color: "#4ac8c0",//线条颜色
                  }
                },
                emphasis: {
                  borderColor: "#8eb2c8",
                  borderWidth: 10
                }
              },//线条样式
              areaStyle:{
                normal:{
                  //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#55a8c8'
                  }, {
                    offset: .34,
                    color: 'rgba(93,162,255,0.25)'
                  },{
                    offset: 1,
                    color: 'rgba(38,197,254,0)'
                  }])
                }
              },//区域颜色渐变
              data:this.inventoryAndSalesUpPriceList
            },


          ]
        };
        myChartMain2.setOption(option2);
      },

      //商品库存量
      getProInventory(){
        //来获取存放柱状图的dom元素
        let myChartMain3 = this.$echarts.init(document.getElementById('proInventoryList'))
        //这里是柱状图的配置，最重要的是series里面的data和xAxis中的data都是数组，
        // 用来存放数据，上面从后台获取到的seriesData和nameDatas赋值给它们，就可以展示所需要的数据
        let option3;
        option3 = {
          //标题
          title:[
            {
              text: '商品库存',
              left: 10,
              top:4,
              textStyle: {
                color: '#333',
                fontSize: 18, // 务必记住设置文字大小只能是数字
                fontWeight: 500
              },
            },
            {
              text: '(商品库存明细 单位：件)',
              left:90,
              top:8,
              textStyle: {
                color: '#848485',
                fontSize: 12, // 务必记住设置文字大小只能是数字
                fontWeight: 400
              },
            }],
          color: ['#5e9cf8', '#5e9cf8'],
          tooltip: {
            trigger: 'axis',//鼠标经过提示
          },
          legend: {
            icon:'circle',
            itemHeight: 7, //修改icon图形大小
            itemGap: 13,
            itemWidth: 7,//图标宽
            top:10,
            right: 20,
            align: 'left',
            textStyle:{
              fontSize:10,
              color:'#848485',
              fontWeight:100
            },

            data:[ '库存量'],
          },
          grid: {
            left: '2%',
            right: '5%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {

            data: this.proInventoryNameList
          },
          yAxis: {
            type: 'value',
            axisLine: {
              //设置为不显示
              show:false,
              lineStyle: {
                type: 'solid',
                color: '#e7e6e6',//左边线的颜色
                width:'1'//坐标线的宽度
              }
            },
            splitLine:{
              show:true,
              lineStyle:{
                type:'dashed',
                color:'#efeded',
              }
            },
            //y轴线上的标记刻度
            axisTick:{
              //设置为不显示
              show:false
            },
          },
          series:[
            {
              name:'库存量',
              type:'bar',
              symbol: "none",
              showBackground: true,
              barWidth:'50%',
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#83bff6' },
                  { offset: 0.5, color: '#188df0' },
                  { offset: 1, color: '#188df0' }
                ])
              },
              emphasis: {
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#3d70ce' },
                    { offset: 0.7, color: '#3d70ce' },
                    { offset: 1, color: '#83bff6' }
                  ])
                }
              },

              data:this.proInventoryCountList
            },

          ]
        };
        myChartMain3.setOption(option3);

      },

      //每日完成接待量
      getReservationsOver(){
        //来获取存放柱状图的dom元素
        let myChartMain4 = this.$echarts.init(document.getElementById('reservationsOver'))
        //这里是柱状图的配置，最重要的是series里面的data和xAxis中的data都是数组，
        // 用来存放数据，上面从后台获取到的seriesData和nameDatas赋值给它们，就可以展示所需要的数据
        let option4;
        option4 = {
          //标题
          title:[
            {
              text: '每日完成接待量',
              left: 10,
              top:4,
              textStyle: {
                color: '#333',
                fontSize: 18, // 务必记住设置文字大小只能是数字
                fontWeight: 500
              },
            },
            {
              text: '(近30天完成接待的客户数量 人/次)',
              left:150,
              top:8,
              textStyle: {
                color: '#848485',
                fontSize: 12, // 务必记住设置文字大小只能是数字
                fontWeight: 400
              },
            }],
          color: ['#63c6ba', '#5e9cf8'],
          tooltip: {
            trigger: 'axis',//鼠标经过提示
          },
          legend: {
            icon:'circle',
            itemHeight: 7, //修改icon图形大小
            itemGap: 13,
            itemWidth: 7,//图标宽
            top:10,
            right: 20,
            align: 'left',
            testSitePriceList:[],
            textStyle:{
              fontSize:10,
              color:'#848485',
              fontWeight:100
            },

          },
          grid: {
            left: '2%',
            right: '5%',
            bottom: '3%',
            containLabel: true
          },
          xAxis:[{
            type: 'category',
            data: this.reservationsOverTimeList,
            //X轴线上的标记刻度
            axisTick:{
              //设置为不显示
              show:false,
              //横坐标数据显示位置(起始位置向后移半格)
              alignWithLabel: true
            },
            axisLine: {
              lineStyle: {
                type:  'solid' ,
                color:  '#e7e6e6' , //左边线的颜色
                width: '1' //坐标线的宽度
              }
            },
          }],
          yAxis:[{
            type:'value',
            axisLine: {
              //设置为不显示
              show:false,
              lineStyle: {
                type: 'solid',
                color: '#e7e6e6',//左边线的颜色
                width:'1'//坐标线的宽度
              }
            },
            splitLine:{
              show:true,
              lineStyle:{
                type:'dashed',
                color:'#efeded',
              }
            },
            //y轴线上的标记刻度
            axisTick:{
              //设置为不显示
              show:false
            },
          }
          ],
          series:[
            {
              name:'完成接待',
              type:'line',
              symbol: "none",
              itemStyle: {
                color: "#63c6ba",
                normal: {
                  lineStyle: {        // 系列级个性化折线样式
                    width: 2,
                    type: 'solid',
                    color: "#63c6ba",//线条颜色
                  }
                },
                emphasis: {
                  borderColor: "#63c6ba",
                  borderWidth: 10
                }
              },//线条样式
              areaStyle:{
                normal:{
                  //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#63c6ba'
                  }, {
                    offset: 0.5,
                    color: 'rgba(78,252,121,0.25)'
                  },{
                    offset: 1,
                    color: 'rgba(102,241,164,0)'
                  }])
                }
              },//区域颜色渐变
              data:this.reservationsOverCountList
            },
          ]
        };
        myChartMain4.setOption(option4);

      },

      // 获取店铺数量和列表
      async getStoreListCount() {
        this.listQuery.tenantIdList = []
        const { content } = await store.getStoreListCount(this.listQuery)
        this.storeList = content;
        for (let storeCount = 0; storeCount < content.length ; storeCount++) {
          storeCount = storeCount + 1
          this.$set(this.listQuery,'storeCount',storeCount)
        }
      },
      // 获取医师数量和列表
      async getPhysicianListCount() {
        this.listQuery.tenantIdList = []
        const { content } = await physician.getPhysicianListCount(this.listQuery)
        this.physicianList = content;
        for (let physicianCount = 0; physicianCount < content.length; physicianCount++) {
          physicianCount = physicianCount + 1
          this.$set(this.listQuery,'physicianCount',physicianCount)
        }
      },
      // 获取用户数量和列表
      async getClientListCount() {
        this.listQuery.tenantIdList = []
        const { content } = await client.getClientListCount(this.listQuery)
        this.clientList = content;
        this.$set(this.listQuery,'clientCount',this.clientList.length)
      },
      // 获取商品数量和列表
      async geSelectProductCount() {
        this.listQuery.tenantIdList = []
        const { content } = await product.selectProductCount(this.listQuery)
        this.productCountList = content;
        console.log(content)
        for (let productCount = 0; productCount < content.length; productCount++) {
          productCount = productCount + 1
          this.$set(this.listQuery,'productCount',productCount)
        }
      },
      // 获取所有数据
      async getSelectNameAndInventory() {
        const { content } = await product.getSelectNameAndInventory(this.listQuery)
        this.selectNameAndInventoryList = content;
        for(let i =0;i<content.length; i++){
          this.proNameList.push(content[i].proName);
          this.proInventoryList.push(content[i].proInventory) ;
          // this.getInventory();
        }
      },
      // 获取每个门店每天的销售额
      async getSalesVolumeOfStore() {
        const { content } = await product.getSelectNameAndInventory(this.listQuery)
        this.selectNameAndInventoryList = content;
        for(let i =0;i<content.length; i++){
          this.proNameList.push(content[i].proName);
          this.proInventoryList.push(content[i].proInventory) ;
          // this.getInventory();
        }
      },
      // 获取每天预约量
      async getReservationNumber() {
        this.listQuery.tenantIdList = []
        const { content } = await home.reservationNumber(this.listQuery)
        this.storeList = content;
      },
    }
  }
</script>

<style>
  .el-calendar-table .el-calendar-day {
    height: 48px;
  }
</style>


<style lang="scss" scoped>
  .dashboard {
    &-container {
      margin: 20px 30px 10px;
      font-size: 16px;
      height: 100%;
      overflow: auto;

      .container_title {
        color: #616c91;
        padding-left: 10px;
        margin-middle: 25px;
      }

      .bor_bom {
        border-middle: 1px solid #e6e6e6;
      }

      &_title {
        font-size: 14px;
        color: #a8a7a7;
        margin-middle: 20px;
      }
    }

  }
  .top{
    width: 100%;
    height: 2%;
    span{
      font-size: 14px;
      color: #848485;
      margin-top: 4px;
      margin-left: 2px;
      display:flex;
    }
  }

  .container{
    width: 100%;
    height: 97%;
    float: left;
  }

  .container-top{
    width: 100%;
    height: 70px;
    float: left;
  }
  .left-top{
    width: 24%;
    height: 100%;
    margin-top: 5px;
    float: left;
    margin-right: 1%;
    background-color: #ffffff;
    img{
      width: 30px;
      height: 30px;
      margin-top: 20px;
      margin-left:50px;
      float: left;
    }
  }
  .top-top-top-text{
    margin-top: 22px;
    margin-left: 20px;
    font-size: 18px;
    float: left;
    span{
      font-size: 26px;
      font-width: 600;
      margin-left: 10px;
    }
  }

  .middle{
    width: 99%;
    background-color: #ffffff;
    float: left;
    margin-top: 20px;
  }

  .middle-top{
    width: 100%;
    height: 40px;
    float: left;
  }
  .middle-top-text{
    width: 7%;
    height: 15px;
    float: left;
    margin-top: 20px;
    span{
      font-size: 15px;
      color:#848485;
      margin-left: 30px;

    }
  }
  .middle-top-time{
    width: 18%;
    float: left;
    margin-top: 10px;
  }
  .middle-middle{
    width: 100%;
    height: 700px;
    float: left;
    margin-top: 20px;
  }
  .middle-middle-echart{
    width: 48%;
    height: 320px;
    border: 1px solid #dcd6d6;
    margin-left: 15px;
    float: left;
  }


</style>
